import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity
} from "react-native";

import { connect } from "react-redux";
import HeaderDefault from "../../components/header/HeaderDefault";
import { theme_app, theme_text } from "../../utils/appTheme";
import { getPatientOfMyWard } from "../../netServer/signs_net";
import Toast from "react-native-simple-toast";

class ConventionPator extends Component {
  constructor(props) {
    super(props);
    this.state = { patientList: [] };
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        backBtnOnPress={navigation.goBack}
        title={navigation.state.params.tittle}
      />
    )
  });

  componentDidMount() {
    this._loadPatinetListWithUserName();
  }

  _loadPatinetListWithUserName = () => {
    let paramss = new FormData();
    paramss.append("userName", this.props.user_info.user_name);
    getPatientOfMyWard(paramss, resp => {
      let { code, data = [], msg } = resp;

      if (code == "0") {
        this.setState({
          patientList: data
        });
      } else {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER);
      }
    });
  };

  _renderItem = ({ item }) => {
    let {
      name,
      bed_no,
      sex,
      age,
      allergy,
      gradeName,
      inhosp_no,
      days = null,
      charge_type
    } = item;
    return (
      <TouchableOpacity
        onPress={() => {
          if (this.props.navigation.state.params.tittle === "常规巡视") {
            this.props.navigation.navigate("ConventionDetail", { pinfo: item });
          } else if (this.props.navigation.state.params.tittle === "吸氧巡视") {
            this.props.navigation.navigate("OxygenDetail", { pinfo: item });
          }
        }}
      >
        <View
          style={{
            width: screenWidth,
            height: 100,
            borderBottomColor: "#efefef",
            borderBottomWidth: 1,

            backgroundColor: "white"
          }}
        >
          <View
            style={{
              width: screenWidth,
              height: 40,
              paddingLeft: 16,
              paddingRight: 16,
              alignItems: "center",
              flexDirection: "row",
              justifyContent: "space-between"
            }}
          >
            <Text style={{ fontSize: 16 }}>{name}</Text>
            <Text>{bed_no}</Text>
          </View>

          <View
            style={{
              width: screenWidth,
              height: 30,
              paddingLeft: 16,
              paddingRight: 16,
              alignItems: "center",
              flexDirection: "row",
              justifyContent: "space-between"
            }}
          >
            <Text>
              {sex == 1 ? "男" : "女"}/{age}
            </Text>
            <Text>{inhosp_no}</Text>
            <Text>{days}</Text>
            <Text>{charge_type}</Text>
          </View>

          <View
            style={{
              width: screenWidth,
              height: 30,
              paddingLeft: 16,
              paddingRight: 16,
              alignItems: "center",
              flexDirection: "row"
            }}
          >
            <Text style={{ width: 80, color: "green" }}>{gradeName}</Text>
            <Text style={{ color: "red" }}>{allergy}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  _keyExtractor = (item, index) => item.patient_no;

  _separator = () => {
    return <View style={{ height: 1, backgroundColor: "#efefef" }} />;
  };

  render() {
    return (
      <View style={styles.container}>
        {/* <View style={{ flex: 1 }} /> */}
        <FlatList
          style={{ flex: 1 }}
          ItemSeparatorComponent={this._separator}
          data={this.state.patientList}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme_app.bg_color
  },
  lineStyle: {
    width: screenWidth - 120,
    height: 40,
    flexDirection: "row",
    alignItems: "center"
  }
});

function select(store) {
  return { user_info: store.userInfo.user_info };
}

export default connect(select)(ConventionPator);
